<template>
<div class="hello">
    <h1>{{ msg }}</h1>
    <div class="btn" ref="dropdownRef" @click="hangleClick">click</div>
    <div>{{ t + name }}</div>
    <div>{{ JSON.stringify(store) }}</div>
    <div>{{ JSON.stringify(objUser) }}</div>
    <p>
        For a guide and recipes on how to configure / customize this project,<br />
        check out the
        <a href="https://cli.vuejs.org" target="_blank" rel="noopener">
            vue-cli documentation
        </a>
    </p>
    <h3>Installed CLI Plugins</h3>
    <modal title="删除文章" :visible="visible" @modal-on-close="visible = false" @modal-on-confirm="hideAndDelete">
        <p>确定要删除这篇文章吗？</p>
    </modal>
</div>
</template>

<script lang="ts">
import {
    defineComponent,
    ref,
    watch,
    reactive
} from "vue";

import {
    useRoute
} from "vue-router";

import {
    useStore
} from "vuex";

import useClickOutside from "@/hooks/useClick";

export default defineComponent({
    data() {
        return {
            t: `33`,
        };
    },

    props: {
        msg: String,
    },

    setup(props, context) {
        let name = ref("小米");

        let visible = ref(true);

        let objUser = reactive({
            name: "333",
            age: 34,
        });

        const dropdownRef = ref < null | HTMLElement > (null);

        const isClickOutside = useClickOutside(dropdownRef);

        watch(isClickOutside, () => {
            if (name.value && isClickOutside.value) {
                name.value = "false";
            } else {
                name.value = "true";
            }
        });

        const route = useRoute();
        const store = useStore <RootStore> ();

        console.log(props);
        console.log(name.value);
        console.log(store.state.name);
        console.log("steup");
        console.log(route.path);
        console.log(store);

        const hangleClick = function () {
            store.dispatch("fetchPosts");
            objUser.age = +new Date();
        };

        let hideAndDelete = () => {
            visible.value = false;
            console.log("hideAndDelete");
        };

        return {
            store: store.state,
            name,
            hangleClick,
            dropdownRef,
            hideAndDelete,
            visible,
            objUser,
        };
    },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
h3 {
    margin: 40px 0 0;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #42b983;
}
</style>
